<template>
  <div>
   <tables  :delDataApi="delMapApi"  :loadDataApi="getMaps" v-on:onAdd="onAdd" v-on:onEdit="onEdit"  :tableCofig="tableConfig" ref="tables"  :columns="columns" />
   <Drawer title="车辆类型" v-model="isShopPanel" width="300" :style="formPanelStyles" :mask-closable="false">
            <Form ref="formValidate" :model="formData" :rules="ruleValidate"  :label-width="80" label-position="left"  >
                <FormItem label="开放平台">
                        <Select v-model="formData.platformType" style="width:200px">
                            <Option v-for="item in mapsPlatforms" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                </FormItem>
                 <FormItem label="API类型" >
                        <Select v-model="formData.mapType" style="width:200px">
                            <Option v-for="item in mapTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                </FormItem>
                <FormItem label="APPKey">
                        <Input v-model="formData.appKey" placeholder="请输入应用key" />
                </FormItem>
                <FormItem label="启用">
                    <i-switch  v-model="formData.enableStatus" true-value="OPEN" false-value="CLOSE"/>
                </FormItem>
                
        </Form>
        <div class="drawer-footer">
            <Button style="margin-right: 8px" @click="isShopPanel = false">取消</Button>
            <Button type="primary" :loading="saveStatus" @click="add">
                <span v-if="!saveStatus">保存</span>
                <span v-else>正在保存中...</span>
            </Button>
        </div>
    </Drawer>  
  </div>
  
</template>

<script>
import Tables from '_c/tables'
import { getMaps, editMap, delMap,MapPlatform,MAPTYPE} from '@/api/system/mapApi'
import {EnableStatus} from '@/libs/EnableStatus'
export default {
  components: {
    Tables
  },
  data () {
  
    return {
      saveStatus:false,//保存状态  
      getMaps:getMaps,
      delMapApi:delMap,
      mapsPlatforms:MapPlatform.items,
      mapTypes:MAPTYPE.items,
      enableStatus:EnableStatus.items,
      formData:{
          appKey:"",
          platformType:MapPlatform.defaluutValue,
          mapType:MAPTYPE.defaluutValue,
          enableStatus:EnableStatus.defaluutValue,
       
      },
      isShopPanel:false,
      formPanelStyles: {
          height: 'calc(100% - 55px)',
          overflow: 'auto',
          paddingBottom: '53px',
          position: 'static'
      },
      ruleValidate:{

      },
      tableConfig:{
          idKey:'typeId',
          border:true,
          stripe:true,
          editable:true,
          noDataText:'暂无地图配制信息',
          action:{
                title:"操作",
                showDel:true,
                showEdit:true,
                width:200
          }
       },
      columns: [
        {title: 'APPKEY', key: 'appKey'},
        {title: '平台', key: 'platformType'},
        {title: 'API', key: 'mapType'},
        {title: '使用次数', key: 'totalInvoking'},
        {title: '失败欠数', key: 'totalErrorNum'},
        {title: '是否开启', key: 'enableStatus'},
        {title: '创建时间', key: 'createTime',format:'date',align:'center'},
        {title: '创建人', key: 'createBy',width:80},
      ]
    }
  },
  methods: {
      
    add(){
          this.saveStatus=true;
          editMap(this.formData)
          .then(res=>{
             this.saveStatus=false
             this.isShopPanel=false;
             this.$refs.tables.loadData();
          })
          .catch(err=>{
             this.saveStatus=false;
             this.$Message.error(err);
          })  
    },
    onEdit(params){
        
    },
    onAdd(){
        this.isShopPanel=true;
    }
    
  },  
  mounted () {
   
  }
}
</script>

<style>

</style>
